/* Check Boxes */

.check-box {
  StBoxLayout { spacing: .8em; }
  StBin {
    width: 24px;
    height: 24px;
    padding: ($medium_size - 24px) / 2;
    border-radius: 100px;
    background-image: url("assets/checkbox-off.svg");
  }
  &:focus StBin {
    background-image: url("assets/checkbox-off.svg");
    background-color: transparent;
    box-shadow: none;
  }
  &:hover StBin {
    background-color: $divider_color;
  }
  &:active StBin {
    background-color: $track_color;
  }
  &:checked StBin {
    background-image: url("assets/checkbox.svg");
  }
  &:focus:checked StBin {
    background-image: url("assets/checkbox.svg");
  }
  &:hover:checked StBin {
    background-color: rgba($accent_color, $lower_opacity / 2);
  }
  &:active:checked StBin {
    background-color: rgba($accent_color, $lower_opacity);
  }

  StIcon {
    icon-size: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    color: transparent;
  }

  &:checked StIcon {
    background-color: transparent;
    color: transparent;
  }

  &:checked:hover StIcon {
    background-color: transparent;
    color: transparent;
  }

  &:checked:active StIcon {
    background-color: transparent;
    color: transparent;
  }
}
